<template>
  <el-carousel :interval="4000" arrow="always" height="500px">
    <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
      <img :src="backendBaseUrl + image.image_url" alt="carousel image" class="carousel-img">
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { carouselList } from '@/api/carousel';

const carouselImages = ref([]);
const backendBaseUrl = 'http://localhost:8080'; // 不带项目名

onMounted(() => {
  getCarouselList();
});

const getCarouselList = () => {
  carouselList().then(res => {
    carouselImages.value = res.data;
  });
};
</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: #fff;
}
</style>